<template>
	<div>
		<!-- 表单 -->
		<el-form :inline="true" :model="pro" class="demo-form-inline">
			<el-form-item label="供应商编码">
				<el-input v-model="pro.proCode" placeholder="供应商编码"></el-input>
			</el-form-item>
			<el-form-item label="供应商名称">
				<el-input placeholder="供应商名称" v-model="pro.proName"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
		</el-form>

		<!-- 表格 -->
		<el-table :data="getProviderList" style="width: 100%" border>
			<!-- 展开显示的标题 -->
			<el-table-column type="expand" fixed="left">
				<template slot-scope="props">
					<el-form label-position="left" inline class="demo-table-expand">
						<el-form-item label="供应商编码">
							<span>{{ props.row.proCode}}</span>
						</el-form-item>
						<el-form-item label="供应商名称">
							<span>{{ props.row.proName }}</span>
						</el-form-item>
						<el-form-item label="联系人">
							<span>{{ props.row.proContact }}</span>
						</el-form-item>
						<el-form-item label="联系电话">
							<span>{{ props.row.proPhone }}</span>
						</el-form-item>
						<el-form-item label="传真">
							<span>{{ props.row.proFax }}</span>
						</el-form-item>
						<el-form-item label="创建日期">
							<i class="el-icon-time"></i>
							<span>{{ props.row.creationDate }}</span>
						</el-form-item>
					</el-form>
				</template>
			</el-table-column>

			<!-- 没展开显示的标题 -->
			<el-table-column align="center" label="供应商编码" width="220" prop="name">
				<template slot-scope="scope">
					<div>
						<span>{{scope.row.proCode}}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column align="center" label="供应商名称" width="220" prop="proName"></el-table-column>
			<el-table-column align="center" label="联系人" width="350" prop="proContact"></el-table-column>
			<el-table-column align="center" label="联系电话" width="180" prop="proPhone"></el-table-column>
			<el-table-column align="center" label="传真" width="180">
				<div slot-scope="scope">
					<span>{{scope.row.proFax }}</span>
				</div>
			</el-table-column>
			<el-table-column align="center" label="创建日期" width="250">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 10px">{{ scope.row.creationDate }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" fixed="right">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<!-- 
			:current-page="2"》》选择默认第几页
		    :page-size="15"》》选择一页显示多少条数据
		 -->
		<div class="block" style="margin-top:20px;">
			<el-pagination 
				@size-change="handleSizeChange" 
				@current-change="handleCurrentChange" 
				:page-sizes="[2,5,8,15,50,100,200,500]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pro.proCount">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		name: "ProviderList",
		data() {
			return {
				/* 表单数据 */
				pro: {
					proCode: '', //供应商编码
					proName: '',//供应商名称,
					proCount:0//供应商总数量
				},
				/* 订单数据 */
				getProviderList: [

				],
				currPage:1,//当前页
				pageSize:8,//每页显示的数量
			}
		},
		/* 在挂载模板的时候去请求后台数据 */
		mounted() {
			this.selectProCount();
			this.selectProList();
		},
		/* 方法 */
		methods: {
			/* 查询数据条数 */
			selectProCount(){
				this.axios.get("/api/query/providerCount",{
					params: {
						proCode: this.pro.proCode,
						proName: this.pro.proName
					}
				}).then(res=>{
					this.pro.proCount=res.data
				});
			},
			/* 查询供应商数据 */
			selectProList(pageSizeVal,currPageVal){
				this.axios.get("/api/query/provider",{
					params:{
							//form表单要查询的参数
							proCode: this.pro.proCode,
							proName: this.pro.proName,
							//上下一页的下班
							pageSize:pageSizeVal,
							currPage:currPageVal
						}
				}).then(results => {
					this.getProviderList = results.data
				});
			},
			/* 查询事件 */
			onSubmit() {
				this.selectProList(this.pageSize,1);
				this.selectProCount();
			},
			handleEdit(index, row) {//编辑事件
				console.log(index, row);
			},
			handleDelete(index, row) {//删除事件
				console.log(index, row);
			},
			//每页数据量
			handleSizeChange(val) {
				//当点击每页显示多少页一条时，去查询出当前多少条一页的数据
				this.pageSize=val;
				this.selectProList(val,this.currPage);
			},
			//当前页数
			handleCurrentChange(val) {
				this.currPage=val;
				this.selectProList(this.pageSize,val);
			}
		}
	}
</script>

<style>
	/* .demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-left: 48px;
		margin-bottom: 0;
		width: 100%;
	} */
</style>
